<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
</head>
<body>
    <ol>
        <li>移除写死的内容,使用动态的方式增加到子类select里面</li>
        <li>给到相关元素一个id</li>
        <li>确定父类的变更事件</li>
        <li>父类的子类进行关联</li>
        <li>判断子类是相关的父类下才进行显示</li>
        <li>显示新的子类之前先移除旧的内容</li>
    </ol>
    父类:
    <select id="parent-category">
        <option value="1">新闻</option>
        <option value="2">体育</option>
        <option value="3">时尚</option>
    </select>

    子类:
    <select id="child-category">
        <!--<option>军事</option>-->
        <!--<option>图片</option>-->
        <!--<option>航空</option>-->

        <!--<option>红彩</option>-->
        <!--<option>NBA</option>-->
        <!--<option>中超</option>-->

        <!--<option>女人</option>-->
        <!--<option>教育</option>-->
        <!--<option>亲子</option>-->
    </select>


    <script>
        // -----------------------------
        // 8. 创建元素、增加元素和删除元素
        // -----------------------------
        /*
            document.createElement() // 创建一个指定标签名的元素
            HTMLElement.appendChild() // 将一个节点附加到指定父节点的子节点列表的末尾处
            HTMLElement.insertBefore() // 在参考节点之前插入一个拥有指定父节点的子节点
            HTMLElement.removeChild() // 移除已存在的元素
         */

        document.getElementById("parent-category").onchange = function () {
            let parentCategoryId = document.getElementById("parent-category").value;
            document.getElementById("child-category").innerHTML = "";

            let childArray = [
                {categoryName: "军事", parentCategoryId: 1},
                {categoryName: "图片", parentCategoryId: 1},
                {categoryName: "航空", parentCategoryId: 1},
                {categoryName: "红彩", parentCategoryId: 2},
                {categoryName: "NBA", parentCategoryId: 2},
                {categoryName: "中超", parentCategoryId: 2},
                {categoryName: "女人", parentCategoryId: 3},
                {categoryName: "教育", parentCategoryId: 3},
                {categoryName: "亲子", parentCategoryId: 3},
            ];
            for (let item of childArray){
                if (item.parentCategoryId === parentCategoryId){
                    //console.log(item);
                    let optionElement = document.createElement("option");
                    optionElement.innerHTML = item.categoryName;

                    document.getElementById("child-category").appendChild(optionElement);
                }
            }
        }

    </script>
</body>
</html>